<template>
  <div class="platform-transaction">
    <Box title="平台交易数据动态">
      <div class="main">
        <vue3-seamless-scroll
          :list="data"
          :hover="true"
          :limitScrollNum="7"
          class="list-wrap"
          :step="0.24"
        >
          <ul class="list">
            <li v-for="(l, i) in data" :key="i" class="item" :title="l.title">
              <span> {{ l.sign }} </span>
              <span> {{ l.unit }} </span>
              <span> {{ l.time }} </span>
              <span v-if="l.productName"> {{ l.productName }} </span>
              <span> {{ l.data }} </span>
            </li>
          </ul>
        </vue3-seamless-scroll>
      </div>
    </Box>
  </div>
</template>

<script setup>
import Box from "./box.vue";
import { ref, onMounted, onUnmounted } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { ajax } from "@/store/service";

const data = ref([]);

const getOrderNum = async () => {
  const res = await ajax.getOrderNum();
  res.forEach((l) => {
    if (l.productName) {
      l.title =
        l.sign +
        "  " +
        l.unit +
        "  " +
        l.time +
        "  " +
        l.productName +
        "  " +
        l.data;
    } else {
      l.title = l.sign + "  " + l.unit + "  " + l.time + "  " + l.data;
    }
  });
  console.log("平台交易数据动态", res);
  data.value = res;
};
let timer = null;

const init = () => {
  getOrderNum();

  timer = setInterval(() => {
    getOrderNum();
  }, 60000);
};

onMounted(() => {
  init();
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped lang='scss'>
.platform-transaction {
  width: 750px;
  height: 900px;
  overflow: hidden;

  .main {
    overflow: hidden;
    .list {
      .item {
        height: 40px;
        background: #001523;
        border: 1px solid #122533;
        margin-bottom: 8px;
        font-family: PingFangSC, PingFang SC;
        font-size: 14px;
        color: #ffffff;
        line-height: 40px;
        text-align: left;
        font-style: normal;
        &:nth-child(2n) {
          background: #0a2845;
        }
        span {
          margin-right: 16px;
        }
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 14px;
      }
    }
  }
}
</style>